<template>
    <el-dialog :title="title" :visible.sync="dialogFormVisible" width="500px" @close="close" top="100px">
        <el-form ref="form" :model="form" :rules="rules" label-width="100px">
            <el-form-item label="上级部门名称" prop="username">
                <el-select class="main-select-tree w" ref="selectTree" v-model="form.parentName"
                           clearable
                           @clear="form.parent_id = ''">
                    <el-option v-for="item in deptDatas" :key="item.id"
                               :label="item.name" :value="item.id" style="display: none;"/>
                    <el-tree class="main-select-el-tree" ref="selecteltree" :data="deptDatas"
                             node-key="id"
                             @node-click="handleNodeClick"
                             highlight-current :props="defaultProps"
                             :current-node-key="form.parent_id"
                             :expand-on-click-node="expandOnClickNode" default-expand-all/>
                </el-select>
            </el-form-item>
            <el-form-item label="部门名称" prop="name">
                <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
            <!--<el-form-item label="状态" prop="is_use">-->
                <!--<el-select v-model.trim="form.is_use" class="w">-->
                    <!--<el-option value="0" label="禁用"></el-option>-->
                    <!--<el-option value="1" label="启用"></el-option>-->
                <!--</el-select>-->
            <!--</el-form-item>-->
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="close">取 消</el-button>
            <el-button type="primary" @click="save" :loading="loading" :disabled="disabled">
                {{ loading ? '确定中 ...' : '确定' }}
            </el-button>
        </div>
    </el-dialog>
</template>

<script>
    import {getDept, getDeptList, doDeptEdit} from '@/api/dept'

    export default {
        name: 'warningTypeEdit',
        data() {
            return {
                filterText: '',
                form: {
                    id: '',
                    is_use: '1',
                    parent_id: '',
                    parentName: '',
                },
                rules: {
                    name: [
                        {required: true, trigger: 'blur', message: '请输入部门名称'},
                    ],
                },
                title: '',
                dialogFormVisible: false,
                loading: false,
                disabled: false,
                expandOnClickNode: true,
                deptDatas: [],
                defaultProps: {
                    children: 'children',
                    name: 'name'
                },
            }
        },
        created() {
        },
        watch: {
            filterText(val) {
                this.$refs.tree.filter(val)
            },
        },
        methods: {
            showEdit(row) {
                this.getDeptData()
                if (!row) {
                    this.title = '添加'
                } else {
                    this.title = '编辑'
                    this.form.id = row;
                    // this.form = Object.assign({}, row)
                    this.fetchData()
                }
                this.dialogFormVisible = true
            },
            async fetchData() {
                const {data} = await getDept(this.form.id)
                // console.log(data)
                this.form = data.data
                this.form.is_use = data.data.is_use + "";
                this.form.parent_id = data.data.parent_id == -1 ? '' : data.data.parent_id;
            },
            getDeptData() {
                getDeptList().then((res) => {
                    // console.log("部门data：")
                    // console.log(res.data)
                    this.deptDatas = res.data
                })
            },
            handleNodeClick(node) {
                // console.log(node.id)
                this.$set(this.form, "parent_id", node.id);
                this.$set(this.form, "parentName", node.name);
                // this.form.parent_id = node.id;
                this.$refs.selectTree.blur();
            },
            filterNode(value, data) {
                if (!value) return true
                return data.label.indexOf(value) !== -1
            },
            close() {
                this.$refs['form'].resetFields()
                this.form = this.$options.data().form
                this.dialogFormVisible = false
            },
            save() {
                if (this.loading) {
                    return
                }
                this.$refs['form'].validate(async (valid) => {
                    if (valid) {
                        this.loading = true
                        this.disabled = true
                        this.timer = setTimeout(() => {
                            setTimeout(() => {
                                this.loading = false
                                this.disabled = false
                            }, 400)
                        }, 2000)

                        doDeptEdit(this.form).then((res) => {
                            if (res.code == 0) {
                                this.$baseMessage(res.msg, 'success')
                                this.$emit('fetch-data');
                                this.close()
                            } else {
                                this.$baseMessage('失败', 'error')
                            }
                        })
                    } else {
                        return false
                    }
                })
            },
        },
    }
</script>
